<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Backbone Demo</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/underscore.js"></script>
		<script src="js/backbone.js"></script>
		<script type="text/javascript">
			$(function() {
				var AlumniModels = Backbone.Model.extend({
					
				});
				var AlumniView = Backbone.View.extend({
					
				}); 
				
				var AlumniCollection = Backbone.Collection.extend({});
				var AppView = Backbone.View.extend({
					el: "#alumniList", 
					initialize: function() {
						data = [{
							name: '白喵',
							obligation: '加班',
							phone: '123456',
							address: "秦皇岛"
						}, {
							name: '黄喵',
							obligation: '睡觉',
							phone: '123456',
							address: "北京"
						}, {
							name: '黑喵',
							obligation: '上班',
							phone: '67890',
							address: "河北"
						}];
						this.render(data);
						
						
					},  
					tpl: _.template($("#AlumniList").html()),
					events:{
						 "click button":"addData"
					},
					render: function(data) {
						//绑定视图和数据   
						$("#AlumniListContainer").append(this.tpl(data));
					}, 
					addData:function(){
						alert();
					}
				}); 
				new AppView();
			})
		</script>
	</head>
	<body>
		<div style="margin:50px auto;width:80%;border:1px solid #ddd;padding:30px;">
			<div class="list" id="alumniList">
				<h2 align="center">同事录</h2>
				<br>
				<form class="form-inline">
					<div class="form-group">
						<label for="exampleInputName2">Name</label>
						<input type="text" class="form-control" id=" " placeholder="Jane Doe">
					</div>
					<div class="form-group" style="margin-left:12px;">
						<label for="">职责</label>
						<input type="" class="form-control" id=" " placeholder="1243124234">
					</div>
					<div class="form-group" style="margin-left:12px;">
						<label for="">电话</label>
						<input type="" class="form-control" id=" " placeholder="1243124234">
					</div>
					<div class="form-group" style="margin-left:12px;">
						<label for="">籍贯</label>
						<input type="" class="form-control" id=" " placeholder="1243124234">
					</div>

					<button type="button" class="btn btn-default jsSearch" id="test">search</button>
				</form>
				<hr />
				<table class="table" cellspacing="" cellpadding="">
					<thead>
						<th>
							姓名
						</th>
						<th>
							职责
						</th>
						<th>
							电话
						</th>
						<th>
							籍贯
						</th>
					</thead>
					<tbody id="AlumniListContainer">
						<script type="text/template" id="AlumniList">
							<%
								_.each(data,function(obj){ 
							%>
								<tr>
									<td>
										<%=obj.name%>
									</td>
									<td>
										<%=obj.obligation%>
									</td>
									<td>
										<%=obj.phone%>
									</td>
									<td>
										<%=obj.address%>
									</td>
								</tr>
								<%
								})
							%>
						</script>
					</tbody>
				</table>
			</div>

			<!--<div class="" style="display: none;">
				<h2 align="center">添加同学录</h2>
				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">姓名</label>
						<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					</div>
					<div class="form-group">
						<label for="exampleInputFile">File input</label>
						<input type="file" id="exampleInputFile">
						<p class="help-block">Example block-level help text here.</p>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox"> Check me out
						</label>
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
			</div>-->

		</div>
	</body>

</html>